<template>
    <div class="findpass">
        <Head :isIndex="false"></Head>
        <div class="content">
            <div class="findPassCon">
                <h1>找回密码</h1>
                <ul>
                    <li class="line" :class="{stp1:bl1,stp2:bl2,stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="crcl crcl1" :class="{stp1:bl1,stp2:bl2,stp3:bl3,stp4:bl4}">1</li><!--
                    --><li class="line" :class="{stp1:bl1,stp2:bl2,stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="line" :class="{stp2:bl2,stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="crcl crcl2" :class="{stp2:bl2,stp3:bl3,stp4:bl4}">2</li><!--
                    --><li class="line" :class="{stp2:bl2,stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="line" :class="{stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="crcl crcl3" :class="{stp3:bl3,stp4:bl4}">3</li><!--
                    --><li class="line" :class="{stp3:bl3,stp4:bl4}"></li><!--
                    --><li class="line" :class="{stp4:bl4}"></li><!--
                    --><li class="crcl crcl4" :class="{stp4:bl4}">4</li><!--
                    --><li class="line" :class="{stp4:bl4}"></li>
                </ul>
                <div class="routerCon">
                    <router-view />
                </div>
            </div>
        </div>
        <Foot></Foot>
    </div>
</template>
<script>
    import Head from '../common/Header.vue';
    import Foot from '../common/Foot.vue';

    export default {
        components: {
            Head,
            Foot
        },
        data(){
            return{
                bl1:false,
                bl2:false,
                bl3:false,
                bl4:false
            }
        },
        created(){
            this.fetchData();
        },
        watch:{
            '$route': 'fetchData'
        },
        methods: {
            fetchData(){
              this.bl1 = (this.$route.name[0] === 'stp1');
              this.bl2 = (this.$route.name[0] === 'stp2');
              this.bl3 = (this.$route.name[0] === 'stp3');
              this.bl4 = (this.$route.name[0] === 'stp4');

            }
        }
    }
</script>
<style lang="scss" scoped>
    div.content {
        height: 600px;
        background-color: #f6f6f6;
        position: relative;
        .findPassCon {
            width: 1200px;
            height: 540px;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: #fff;
            h1 {
                font-size: 21px;
                font-weight: normal;
                padding: 50px 0 50px 50px;
            }
            ul {
                font-size: 17px;
                text-align: center;
                li {
                    background-color: #dfdfdf;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                    &.line{
                        width: 84px;
                        height: 2px;
                    }
                    &.crcl{
                        width: 32px;
                        height: 32px;
                        text-align: center;
                        line-height: 32px;
                        border-radius:50%;
                        &:after{
                            position: absolute;
                            width: 90px;
                            top:40px;
                            left: -30px;
                            color: #999;
                        }
                    }
                    &.crcl1{
                        position: relative;
                        &:after{
                            content: "填写账户";
                        }
                    }
                    &.crcl2{
                        position: relative;
                        &:after{
                            content: "验证身份";
                        }
                    }
                    &.crcl3{
                        position: relative;
                        &:after{
                            content: "设置新密码";
                        }
                    }
                    &.crcl4{
                        position: relative;
                        &:after{
                            content: "完成";
                        }
                    }
                    @mixin stp{
                        background-color: #ff6235;
                        &:after{
                            color: #ff6235;
                        }
                    }
                    &.stp1{
                        @include  stp
                    }
                    &.stp2{
                        @include  stp
                    }
                    &.stp3{
                        @include  stp
                    }
                    &.stp4{
                        @include  stp
                    }
                }
            }
            .routerCon{
                width: 355px;
                height: 180px;
                position: absolute;
                margin: auto;
                top:auto;
                right: 0;
                bottom: 65px;
                left: 0;
            }
        }
    }
</style>